<template>
  <div class="chartDiv" ref="chartDiv"> </div>
</template>
<script setup lang="ts">
  import * as echarts from 'echarts';
  import { onMounted, ref, watch } from 'vue';
  const chartDiv = ref();
  const analysis = ref();
  let formatNumber = function (num = 0) {
    let reg = /(?=(\B)(\d{3})+$)/g;
    return num.toString().replace(reg, ',');
  };

  const props = defineProps({
    chartInfo: {
      type: Array,
      default: () => {},
    },
  });

  watch(
    () => props.chartInfo,
    async () => {
      analysis.value.clear();
      option.value.legend.formatter = function (name) {
        return `${name}  {len||}  {val|${
          name == '质检无误'
            ? !!props.chartInfo.totalNum == 0
              ? 0
              : Math.round(100 - props.chartInfo.errorNumRate*100)
            : Math.round(props.chartInfo.errorNumRate * 100)
        }%}`;
      };
      option.value.title[0].text='{name|' + '已检试题' + '}\n{val|' + formatNumber(props.chartInfo?.totalNum||0) + '}'
      option.value.series[0].data[0].value=props.chartInfo?.correctNum||0;
      option.value.series[0].data[1].value=props.chartInfo?.errorNum||0;
      analysis.value.setOption(option.value);
    },
    {
      deep: true,
    },
  );

  const option = ref({
    tooltip: {
      //   trigger: 'item',
      //   formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    color: ['#00baad', '#ff5733'],
    legend: {
      orient: 'vertical',
      left: '45%',
      top: '35%',
      data: ['质检无误', '质检异常'],
      formatter: function (name) {
        return `${name}  {len||}  {val|${
          name == '质检无误'
            ? props.chartInfo.totalNum == 0
              ? 0
              : 1 - props.chartInfo.errorNumRate
            : props.chartInfo.errorNumRate * 100
        }%}`;
      },
      textStyle: {
        rich: {
          len: {
            color: '#eeeeee',
          },
          val: {
            fontSize: 10,
          },
        },
      },
    },
    title: [
      {
        text: '{name|' + '已检试题' + '}\n{val|' + formatNumber(props.chartInfo?.totalNum) + '}',
        top: 'center',
        right: '63%',
        textAlign: 'center',
        textStyle: {
          rich: {
            name: {
              fontSize: 14,
              fontWeight: 'normal',
              color: '#bbb',
              padding: [10, 0],
            },
            val: {
              fontSize: 16,
              color: '#333333',
            },
          },
        },
      },
    ],
    series: [
      {
        type: 'pie',
        radius: ['50%', '70%'],
        right: '50%',
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center',
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          { value: props.chartInfo.correctNum, name: '质检无误' },
          { value: props.chartInfo.errorNum, name: '质检异常' },
        ],
      },
    ],
  });

  onMounted(() => {
    analysis.value = echarts.init(chartDiv.value);
    analysis.value.setOption(option.value);
  });
</script>
<style lang="less" scoped>
  .chartDiv {
    width: 100%;
    height: 100%;
  }
</style>
